<template>
    <div style="padding: 20px 200px">
        <h2> home页</h2>
        <br/>
        <p>
            使用 router-link 组件来导航
        </p>
        <p>
            通过传入 `to` 属性指定链接
        </p>
        <p>
            router-link 默认会被渲染成一个 a 标签
        </p>
        <p>
            <router-link to="a">页面a</router-link>
        </p>
        <p>
            <router-link to="b">页面b</router-link>
        </p>
        <br/>
        <ul>
            <li>除了使用 router-link 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现</li>
            <li> router.push(location, onComplete?, onAbort?)</li>
            <li></li>
            <li></li>
            <li> 字符串:router.push('home')</li>
            <li> 对象: router.push({ path: 'home' })</li>
            <li> 命名的路由: router.push({ name: 'user', params: { userId: '123' }})</li>
            <li> 带查询参数，变成 /register?plan=private: router.push({ path: 'register', query: { plan: 'private' }})</li>
        </ul>

        <button @click="gotoHomeHandler">前往index</button>
    </div>

</template>

<script>
    export default {
        name: "home",
        methods: {
            gotoHomeHandler() {
                this.$router.push({
                    name: "index"
                })
            }
        }
    }
</script>

<style scoped>

</style>
